<script setup lang="ts">
import QGantt from '@/components/q-gantt/index.vue';
import useHeight from './hooks/useHeight';
import { searchConfig } from './config/search-config.ts';
import { gTableConfig } from './config/g-table-config';
import { handleDelKey } from '@/utils/common';
import { generateNameToLevel } from '@/config/constant';
import { cloneDeep } from 'lodash-es';
import { GTableConfig } from '@/components/q-gantt/type';
import { doGetGanttChartList } from '@/api/plan/gantt/index';

// 处理高度
const { ganttBodyRef, height } = useHeight();

/**
 * @: 左边表格展开收起
 */
const baseSearchRef = ref<SearchRef>();
const ganttTableConfig = ref<GTableConfig[]>([]);
const ganttSearchConfig = ref<any>();
let open = true;
const barOpen = (isOpen: boolean) => {
    open = isOpen;
    if (isOpen) {
        ganttTableConfig.value = [...gTableConfig];
        ganttSearchConfig.value = cloneDeep(searchConfig);
    } else {
        ganttTableConfig.value = gTableConfig.filter(item => {
            return item.label === '设备名称';
        });
        if (!ganttSearchConfig.value) return;
        const itemData = searchConfig.items.filter(item => item.columnProps?.label !== '车间名称');
        ganttSearchConfig.value.items = itemData;
    }
};

/**
 * @: 查询相关
 */
interface IParams {
    deviceName: string;
    workshopName: string;
    plan: string;
    planTime: {
        start: string;
        end: string;
    };
}

/**
 * @: 处理查询参数
 */
const QGanttRef = ref<InstanceType<typeof QGantt>>();
const handleSearch = (params: IParams) => {
    if (!open) params = handleDelKey(params, ['workshopName']);
    QGanttRef.value?.getData({
        ...params,
        planTime: null,
        ['planTime.start']: params.planTime?.start || '',
        ['planTime.end']: params.planTime?.end || ''
    });
};

onBeforeMount(() => {
    barOpen(true);
});

/**
 * @: 提示信息显示位置
 */
const offset = ref(0);
const handlerMouseenter = (event: MouseEvent) => {
    const { offsetX } = event;
    const offsetCenter = offsetX - 210;
    if (Math.abs(offsetCenter - offset.value) <= 30) return;
    offset.value = offsetCenter;
};
const materialCode = 'materialCode';
</script>

<template>
    <q-page>
        <!-- 搜索 -->
        <div>
            <base-search
                ref="baseSearchRef"
                :search-config="ganttSearchConfig"
                @search="handleSearch"
                @refresh="QGanttRef?.getData({ current: 1, size: 20 })"
            />
        </div>

        <!-- 甘特图 -->
        <div :id="generateNameToLevel('gantt')" ref="ganttBodyRef" :style="{ height }">
            <q-gantt
                ref="QGanttRef"
                :dataClor="materialCode"
                :cell-width="150"
                :cell-height="46"
                :g-table-config="ganttTableConfig"
                :get-data-fn="doGetGanttChartList"
                @open-table="barOpen"
            >
                <template #col="{ colData }">
                    <el-popover
                        placement="bottom-start"
                        :popper-options="{
                            modifiers: [{ name: 'offset', options: { offset: [offset, 10] } }]
                        }"
                        :show-arrow="false"
                        :width="420"
                        trigger="hover"
                    >
                        <template #reference>
                            <div @mouseenter="handlerMouseenter">{{ colData.materialCode }}</div>
                        </template>
                        <div class="tip">
                            <div class="tip__top">提示信息</div>
                            <div class="tip__body">
                                <p>物料编码： {{ colData.materialCode }}</p>
                                <p>物料名称： {{ colData.materialName }}</p>
                                <p>工序号： {{ colData.processNumber }}</p>
                                <p>工序名称： {{ colData.processName }}</p>
                                <p>数量： {{ colData.quantity }}</p>
                                <p>开始时间： {{ colData.planStartTime }}</p>
                                <p>结束时间： {{ colData.planEndTime }}</p>
                                <p>订单号： {{ colData.orderNumber }}</p>
                            </div>
                        </div>
                    </el-popover>
                </template>
            </q-gantt>
        </div>
    </q-page>
</template>

<style scoped lang="scss">
@include b(tip) {
    box-sizing: border-box;
    @include e(top) {
        height: 30px;
        padding-left: 16px;
        margin: 0 -12px;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        border-bottom: 1px solid var(--q-color-info-light-8);
    }

    @include e(body) {
        padding: 4px;
        margin-top: 10px;
        font-size: 14px;
        line-height: 28px;
    }
}
</style>
